<template>
  <nav class="bottom-nav">
    <router-link to="/" class="nav-item" :class="{ active: $route.path === '/' }">
      <span class="nav-icon">🏠</span>
      <span class="nav-text">首页</span>
    </router-link>
    <router-link to="/community" class="nav-item" :class="{ active: $route.path === '/community' }">
      <span class="nav-icon">💬</span>
      <span class="nav-text">动态</span>
    </router-link>
    <router-link to="/challenge" class="nav-item" :class="{ active: $route.path === '/challenge' }">
      <span class="nav-icon">🏆</span>
      <span class="nav-text">挑战</span>
    </router-link>
    <router-link to="/carbon" class="nav-item" :class="{ active: $route.path === '/carbon' }">
      <span class="nav-icon">🌍</span>
      <span class="nav-text">碳足迹</span>
    </router-link>
    <router-link to="/exchange" class="nav-item" :class="{ active: $route.path === '/exchange' }">
      <span class="nav-icon">♻️</span>
      <span class="nav-text">兑换</span>
    </router-link>
    <router-link to="/profile" class="nav-item" :class="{ active: $route.path === '/profile' }">
      <div class="nav-avatar">
        <img v-if="userAvatar" :src="userAvatar" alt="用户头像">
        <div v-else class="nav-avatar-fallback">{{ (username || '用户').slice(0, 1) }}</div>
      </div>
      <span class="nav-text">我的</span>
    </router-link>
  </nav>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
const { userAvatar = '', username = '' } = defineProps<{ userAvatar?: string; username?: string }>()
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  z-index: 1000;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333333;
  transition: all 0.2s ease;
  padding: 6px 10px;
  min-width: 50px;
  border-radius: 12px;
}

.nav-item:hover {
  background: #F0F3F2;
  color: #73A986;
}

.nav-item.active {
  background: #73A986;
  color: #FFFFFF;
}

.nav-icon {
  font-size: 20px;
  margin-bottom: 2px;
}

.nav-text {
  font-size: 12px;
  font-weight: 600;
}

.nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #333333;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .bottom-nav {
    padding: 8px 0;
  }
  
  .nav-icon {
    font-size: 18px;
  }
  
  .nav-text {
    font-size: 11px;
  }
}

/* 桌面端隐藏底部导航 */
@media (min-width: 769px) {
  .bottom-nav {
    display: none;
  }
}
</style>
